<!--
 * @version: v1.0
 * @Author: ItLy
 * @Date: 2021-03-03 21:57:45
 * @LastEditors: ItLy
 * @LastEditTime: 2021-03-03 22:24:44
-->
<template>
  <a-layout-header :style="{ position: 'fixed', top: 0, zIndex: 99, width: '100%' }">
    <div class="menu warpper">
      <nuxt-link to="/" id="logo" title="刘洋个人博客">
        <!-- <span class="logo-span" data-content="itl">itl</span> -->
        <img class="logo" src="@/assets/images/logo.png" srcset="" alt="itliuyang-logo"/>
      </nuxt-link>
      <nav class="menu-nav">
        <nuxt-link :to="item.link" class="menu-nav_item" tag="a" v-for="(item, index) in navs" :key="index">
          <i class="iconfont" :class="item.icon"> </i>
          <span v-show="item.name">{{ item.name }}</span>
        </nuxt-link>
      </nav>
    </div>
  </a-layout-header>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
@Component
export default class HelloWorld extends Vue {
  navs: Array<any> = [
    { id: "1122", name: "首页", link: "/", icon: "icon-shouye" },
    { id: "1124", name: "记录", link: "/record", icon: "icon-jilu" },
    { id: "1123", name: "关于", link: "/about", icon: "icon-guanyuwomen" },
    { id: "1125", name: "导航", link: "/navs", icon: "icon-jilu" },
    // { id: "1126", name: "邻居", link: "/link", icon: "icon-jilu" },
    { id: "1127", name: "碎语", link: "/twitter", icon: "icon-leaf" },
  ];

  //   @Prop({
  //     // default: "123123",
  //   })
  //   @Emit('bindSend') send(msg: string){};
  // methods
  //   toFather(){
  //     this.send('HelloWord 来消息');;
  //   }
}
</script>
<style lang="scss" scoped>
.menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  #logo {
    width: 100px;
    height: 40px;
    background: #fff;
    text-align: center;
    line-height: 40px;
    overflow: hidden;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      width: 100px;
      height: 10px;
      background-color: rgba(255, 255, 255, 0.5);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: logoLights 1s ease-in 1s infinite;
      animation: logoLights 1s ease-in 1s infinite;
      z-index: 2;
    }
    .logo {
      width: 40px;
      height: 40px;
    }
  }
  &-nav {
    &_item {
      margin: 0 10px;
      color: #000;
      height: 100%;
      display: inline-block;
      margin-left: 30px;
    }
  }
}
.ant-layout-header {
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
}
.nuxt-link-exact-active {
  color: #0099ff;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 3px;
    width: 60%;
    left: 20%;
    background-color: #0099ff;
  }
}
#logo {
  &::after {
    display: none;
  }
}

@keyframes logoLights {
  from {
    left: -100px;
    top: 0;
  }
  to {
    left: 320px;
    top: 0;
  }
}
</style>